<template>
  <div v-loading="a" class="form">
  <div class="common-layout" v-if="b">
    <el-container>
      <el-header
        style="background: linear-gradient(50deg, #000000ad, #0000000a);">
        <div class="common-header">
          <div class="user_icon">
            <us-icon />
          </div>
          <div class="srk_icon">
            <srk-icon />
          </div>
        </div>
      </el-header>
      <el-container class="common-layout">
        <el-aside width="300px" style="padding-top: 60px;">
          <phb-icon />
        </el-aside>
        <el-main style="padding-top: 60px;">
          <zmd-icon />
          <div class="rmdy">热门电影</div>
          <fiml2-icon/>
          <div class="rmdy">最新电影</div>
          <fiml3-icon/>
          <div class="rmdy">推荐电影</div>
          <film-icon />
        </el-main>
      </el-container>
    </el-container>
  </div>
  </div>
</template>
<script setup lang="ts">


import SrkIcon from '@/components/ico/home/sskIcon.vue'
import ZmdIcon from '@/components/ico/home/zmdIcon.vue'
import FilmIcon from '@/components/ico/home/filmIcon.vue'
import PhbIcon from '@/components/ico/home/phbIcon.vue'
import UsIcon from '@/components/ico/home/usIcon.vue'
import { ref } from 'vue'
import Fiml2Icon from '@/components/ico/home/fiml2Icon.vue'
import Fiml3Icon from '@/components/ico/home/fiml3Icon.vue'

const a=ref(true)
const b=ref(false)
setTimeout(()=>{
  a.value=false
  b.value=true
},1500)
</script>
<style>
.rmdy{
  width: 100%;
  margin-top: 25px;
  padding-top: 9px;
  padding-left: 28px;
  height: 40px;
  border-bottom: 1px solid;
}
.form{
  width: 100%;
  height: 100%;
}
.common-layout {
  height: 100%;
  overflow-y: auto;
  display: flow;
}

.user_icon {
  width: 70%;
  height: 50px;
}

.srk_icon {
  margin-top: 12px;
  width: 450px;
}

.common-header {
  display: flex;
  flex-direction: row;
  width: 100%;
  height: 100%;
}

.common-layout {
  display: flex;
  width: 100%;
  height: 100vh;
  background: radial-gradient(#bdbdbd, rgba(0, 0, 0, 0.91));
  color: #f3f3f3;
}


.common-layout-zmd {
  margin: 0 auto;
  width: 100%;
  height: 410px;
}

.el-header {
  position: fixed;
  z-index: 5;
  width: 100%;
  background: rgba(127, 255, 212, 0);
}

.el-carousel__item h3 {
  color: #475669;
  opacity: 0.75;
  line-height: 200px;
  margin: 0;
  text-align: center;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}


/*定义滚动条高宽及背景
 高宽分别对应横竖滚动条的尺寸*/
::-webkit-scrollbar {
  width: 7px;
  height: 2px;
  background-color: rgba(245, 245, 245, 0);
}

/*定义滚动条轨道
 内阴影+圆角*/
::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.22);
  border-radius: 10px;
  background-color: rgba(245, 245, 245, 0);
}

/*定义滑块
 内阴影+圆角*/
::-webkit-scrollbar-thumb {
  border-radius: 8px;
  -webkit-box-shadow: inset 0 0 6px rgba(159, 159, 159, 0.3);
  background-color: #818181;
}

</style>
